<template lang="pug">
  .homepart
    div.mbx
      span.ml24 日常园务
      div(@click="$router.push('/operative/dailyAffairs')")
        span 园务管理
        img(src="@/assets/right.png")
    <!--p-->
      <!--el-radio-group.tabTypes(v-model="curTabKey" style="margin-bottom: 15px")-->
        <!--el-radio-button(v-for="(tab, key) in tabs" :key="key" :label="key") {{tab.title}}-->
    p.tr
      el-date-picker(
        v-model="value1"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="change"
      )
      <!--el-radio-group.tabTypes(v-model="searchKey")-->
        <!--el-radio(v-for="(tab, key) in searchList" :key="key" :label="key") {{tab.title}}-->
    .echartBox#dailyAffireEchartsBox(style="height: 496px")
</template>
<script>
import echartMixin from '@/mixins/echarts'
import { areaTypeCount } from '../dailyAffairs/api'
import { mapGetters } from 'vuex'
import { formatTimestamp } from '@/utils/date'
export default {
  mixins: [echartMixin],
  data () {
    return {
      loading: false,
      echartsId: 'dailyAffireEchartsBox',
      curTabKey: 0,
      tabs: [
        { key: 0, title: '集团日检查统计' },
        { key: 1, title: '集团周检查统计' },
        { key: 2, title: '日检查统计' },
        { key: 3, title: ' 园所检查结果' }
      ],
      searchKey: 'catogery',
      searchList: [
        { key: 'catogery', title: '按类别' },
        { key: 'time', title: '按时间' }
      ],

      value1: [Date.now(), Date.now()]
    }
  },
  computed: {
    ...mapGetters(['curArea'])
  },
  mounted () {
    this.getData()
  },
  methods: {
    change (res) {
      // console.log(res)
      this.getData()
    },
    getData () {
      console.log(this.value1)
      const startTime = formatTimestamp(this.value1[0], 'date', false)
      const endTime = formatTimestamp(this.value1[1], 'date', false)
      areaTypeCount({ areaId: this.curArea.areaId, startTime, endTime }).then(res => {
        console.log(res)
        this.getEcharts(res)
      })
      // const data = [
      //   { gardenName: '2021-07', value: 423 },
      //   { gardenName: '2021-08', value: 513 },
      //   { gardenName: '2021-09', value: 663 },
      //   { gardenName: '2021-10', value: 323 }
      // ]
      // this.getEcharts(data)
    },
    getEcharts (values) {
      console.log(values)
      // const allValue = values.reduce((sum, cur) => {
      //   return sum + cur.value
      // }, 0)
      const options = {
        grid: {
          left: 40,
          right: 40
        },
        xAxis: {
          type: 'category',
          data: values.map(x => x.targetType)
        },
        yAxis: {
          type: 'value'
        },
        lineStyle: {
          color: '#5470C6'
        },
        itemStyle: {
          color: '#5470C6'
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: '#fff',
          formatter: params => {
            const data = params[0]
            const dataIndex = data.dataIndex
            const item = values[dataIndex]
            return `<div class="echartsTooltop"><h3>${item.targetType}</h3><p>最高分: ${item.highValue}</p><p>最低分: ${item.lowValue}</p><p>平均分: ${item.averageValue}</p><p>最后检查时间: ${item.lastDate || '-'}</p></div>`
          }
        },
        series: [
          {
            data: values.map(x => x.averageValue),
            type: 'bar',
            smooth: true
          }
        ]
      }
      this.$_chartMixin_init(options)
    }
  }
}
</script>
<style lang="scss" scoped>
.homepart{
  background-color: #fff;
  border-radius: 8px;
  padding: 24px;
  .mbx{
    padding: 0 !important;
  }
}

.echartBox{
  ::v-deep{
    div{
      overflow: visible !important;
    }
    .echartsTooltop{
      padding: 16px !important;
      background: #fff !important;
      box-shadow: 0px 4px 8px 4px rgba(0,0,0,0.06) !important;
      border-radius: 6px !important;
      border: 1px solid #DCDCDC !important;

      > h3 {
        margin: 0;
        font-family: Source Han Sans SC, Source Han Sans SC;
        font-weight: bold;
        font-size: 14px;
        color: #000000;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin-bottom: 12px;
      }

      > p{
        font-family: Source Han Sans SC, Source Han Sans SC;
        font-weight: 400;
        font-size: 14px;
        color: #77778C;
        text-align: left;
        font-style: normal;
        text-transform: none;
        position: relative;

        &::before{
          content: '';
          display: block;
          position: absolute;
          left: 0;
          top: 50%;
          width: 6px;
          height: 6px;
          background-color:  #7FC73C !important;
          transform: translateY(-50%);
        }
      }
      > p:nth-child(3){
        &::before{
          background-color:  #FF5757 !important;
        }
      }
      > p:nth-child(4){
        &::before{
          background-color:  #FFCC3C !important;
        }
      }
      > p:nth-child(5){
        &::before{
          background-color:  #ccc !important;
        }
      }
    }
  }
}
</style>
